<template>
	<view class="navTabBox" :style="{'font-size':fontS + 'rpx','font-weight':fontW}">
		<view class="com-box-l" @tap.stop="back" v-if="show">
			<uni-icons :color="color" :type="leftIcon" :size="iconfont" />
		</view>
		<view class="longTab">
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex" scroll-with-animation
				:scroll-left="tabLeft">
				<view 
				class="longItem" 
				:style="{width:+isWidth+'px', 'font-size':index===tabClick?afontS+'rpx':fontS+'rpx','font-weight':index===tabClick?'600':'400'}" 
				:data-index="index"
				:class="index===tabClick?'click':''" v-for="(item,index) in tabTitle" 
				:key="index" :id="'id'+index"
				@click="longClick(index)">
				{{item}}
				<view class="nav-item-num" v-if="is_num_show && index===0 && ld_num>0">{{ld_num}}</view>
				<view class="nav-item-num" v-if="is_num_show && index===1 && cy_num>0">{{cy_num}}</view>
				</view>
				<view class="underlineBox" :style='"transform:translateX("+isLeft+"px);width:"+isWidth+"px"'>
					<view class="underline"></view>
				</view>
			</scroll-view>
		</view>
		<view class="com-box-r" v-if="show">
			
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		name: 'navTab',
		components: {
			uniIcons
		},
		props: {
			//是否开启导航数字提示
			is_num_show:{
				type: Boolean,
				default: false
			},
			ld_num:{
				type:String,
				default:'4'
			},
			cy_num:{
				type:String,
				default:'2'
			},
			fontS:{
				type:String,
				default:'32'
			},
			afontS:{
				type:String,
				default:'36'
			},
			fontW:{
				type:String,
				default:'400'
			},
			show:{
				type: Boolean,
				default: false
			},
			tabTitle: {
				type: Array,
				default: []
			},
			color: {
				type: String,
				default: "#595757"
			},
			leftIcon: {
				type: String,
				default: "arrowleft"
			},
			iconfont: {
				type: String,
				default: "24"
			},
			active:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				tabClick: this.active, //导航栏被点击
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0
			};
		},
		created() {
			let _self = this
			let iconwidth = 0;
			if(this.show){
				iconwidth = 70;
			}else{
				iconwidth = 14;
			}
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					if (_self.tabTitle.length <= 5) {
						_self.isWidth = (e.windowWidth - iconwidth) / _self.tabTitle.length //宽度除以导航标题个数=一个导航所占宽度	
					} else {
						_self.isWidth = (e.windowWidth - iconwidth) / 5
					}
					_self.tabClick = _self.active;
					_self.isLeft = _self.active * _self.isWidth;
					_self.$emit('changeTab', _self.active)
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 导航栏点击
			longClick(index) {
				if (this.tabTitle.length > 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.tabClick = index; //设置导航点击了哪一个
				this.isLeft = index * this.isWidth; //设置下划线位置
				this.$emit('changeTab', index); //设置swiper的第几页
				this.$parent.currentTab = index //设置swiper的第几页
			}
		}
	}
</script>

<style lang="scss">
	.nav-item-num {
		position: absolute;
		right: 0;
		top: 6rpx;
		width: 32rpx;
		height: 32rpx;
		background: #FF5454;
		border-radius: 50%;
		font-size: 18rpx;
		font-weight: 400;
		line-height: 30rpx;
		color: $font-color-w;
	}
	.navTabBox {
		display: flex;
		align-items: center;
		width: 100vw;
		color: $font-color-3;
		padding: 0 7px;

		.com-box-l {
			width: 28px;
			height: 28px;
		}
		.com-box-r {
			width: 28px;
			height: 28px;
		}

		.click {
			color: $font-color-b3;
		}

		.longTab {
			width: calc(100vw- 56px);

			.longItem {
				height: 82upx;
				display: inline-block;
				line-height: 82upx;
				text-align: center;
				position: relative;
			}

			.underlineBox {
				height: 3px;
				width: 20%;
				display: flex;
				align-content: center;
				justify-content: center;
				transition: .5s;

				.underline {
					width: 32upx;
					height: 8rpx;
					background: $uni-but-bg-color;
				}
			}
		}
	}
</style>
